import {Component, ViewChildren, QueryList, ElementRef, Renderer} from "@angular/core";
import {ResponseMsgModel} from "./shared/model/response-msg-model";
import {UserRegisterHttpService} from "./shared/service/user-register-http.service";
import {UserModel} from "../shared/model/user.model";
import {Router} from "@angular/router";
import {Observable} from "rxjs";

@Component({
    selector: 'user-register',
    templateUrl: './user-register.component.html',
    styleUrls: ["./style-source/user-register.component.scss"]
})
export class UserRegisterComponent {
    @ViewChildren("inputCheck") inputChecks: QueryList<ElementRef>;

    public user: UserModel = new UserModel();

    //该对象用于存储各个校验中的ngClass指令的值
    public styleNgClassContainer: any = {
        usernameClass: {},
        passwordClass: {},
        retryPassClass: {},
        phoneClass: {}
    };

    //存储校验结果的对象
    public validateMessageContainer: any = {
        usernameMsg: new ResponseMsgModel(true, ""),
        passwordMsg: new ResponseMsgModel(true, ""),
        retryPassMsg: new ResponseMsgModel(true, ""),
        phoneMsg: new ResponseMsgModel(true, "")
    };

    constructor(private renderer: Renderer, private userRegisterHttpService: UserRegisterHttpService, private router: Router) {
    }

    //Username校验结果的反馈
    public displayUsernameVerifyResult(existResponse: ResponseMsgModel) {
        if (existResponse) {
            this.setNgClass(existResponse.result, "usernameClass");
            this.setValidateMessage(existResponse, "usernameMsg");
        } else {
            this.restoreNgClass("username");
        }
    }

    //Password校验结果的反馈
    public displayPasswordVerifyResult(response: ResponseMsgModel) {
        if (response) {
            this.setNgClass(response.result, "passwordClass");
            this.setValidateMessage(response, "passwordMsg");
        } else {
            this.restoreNgClass("password");
        }
    }

    //RetryPass校验结果的反馈
    public displayRetryPassVerifyResult(response: ResponseMsgModel) {
        if (response) {
            this.setNgClass(response.result, "retryPassClass");
            this.setValidateMessage(response, "retryPassMsg");
        } else {
            this.restoreNgClass("retryPass");
        }
    }

    //Phone校验结果的反馈
    public displayPhoneVerifyResult(response: ResponseMsgModel) {
        if (response) {
            this.setNgClass(response.result, "phoneClass");
            this.setValidateMessage(response, "phoneMsg");
        } else {
            this.restoreNgClass("phone");
        }
    }

    public register(): void {
        let ren = this.renderer, allInput: QueryList<ElementRef> = this.inputChecks;

        Observable.create((observer) => {
            this.inputChecks.forEach((item: ElementRef) => {
                this.renderer.invokeElementMethod(item.nativeElement, "focus");
                this.renderer.invokeElementMethod(item.nativeElement, "blur");
            });
            observer.next();
        }).subscribe(() => {
            if (this.checkAllInput()) {
                this.userRegisterHttpService.register(this.user, result => this.successCallback(result));
            }
        });
    }

    private successCallback(result: any) {
        console.log("register result: " + result);
        this.router.navigate(["loginIn"]);
    }

    private checkAllInput(): boolean {
        return this.validateMessageContainer.usernameMsg.result &&
            this.validateMessageContainer.passwordMsg.result &&
            this.validateMessageContainer.retryPassMsg.result &&
            this.validateMessageContainer.phoneMsg.result;
    }

    //这个方法用于设置各个input的ngClass
    private setNgClass(result: boolean, target: string): void {
        this.styleNgClassContainer[target] = {
            inputSucceed: result,
            inputDefeat: !result
        }
    }

    //这个方法用于还原输入框的样式要最原始的状态
    private restoreNgClass(target: string): void {
        this.styleNgClassContainer[target + "Class"] = {};
        this.validateMessageContainer[target + "Msg"] = new ResponseMsgModel(true, "");
    }

    //这个方法用于向存储校验结果的对象设置结果
    private setValidateMessage(response: ResponseMsgModel, target: string) {
        this.validateMessageContainer[target] = response;
    }
}